<!DOCTYPE html>
<html lang="en" ng-app='mk'>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
		<title>手机登录界面</title>
		<link rel="stylesheet" href="css/login.css"/>
		<link rel="stylesheet" href="css/base.css"/>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/angular-1.5.6.js"></script>
		<script>
		function span(obj1,obj2){
			obj1.oninput = function(){
				obj2.style.display = 'none';
				if(!obj1.value){
					obj2.style.display = 'block';
				}
			};
			obj2.onclick = function(){
				obj1.focus();
			};
		}
		window.onload = window.onresize = function(){
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 16 + 'px';
			var login = document.getElementById('userName');
			var loginSpan = document.getElementById('span_text');
			var pass = document.getElementById('passName');
			var passSpan = document.getElementById('span_pass');
			var eye = document.getElementById('eye');
			span(login,loginSpan);
			span(pass,passSpan);
			eye.onclick = function(){
				var passType = pass.getAttribute('type');
				if(passType == 'password'){
					pass.type = 'text';
					pass.focus();
				}else{
					pass.type = 'password';
					pass.focus();
				}
			};
		};
		var app = angular.module('mk',[]);
		app.controller('show',function($scope,$http){
			$scope.login = function(){
				if(!$scope.user || !$scope.pass){
					alert('用户名或密码不能为空');
					return;
				}
				$http({
					url:'/add',
					methed:'get',
					params:{
						user:$scope.user,
						password:$scope.pass
					}
				}).then(function(res){
					var json = res.data;
					if(!json.error){
						alert(json.res);
						$scope.user = '';
						$scope.pass = '';
					}else{
						alert(json.res);
					}
					
				},function(){
					alert('网络连接错误');
				});
			}

		})
		</script>
	</head>
	<body ng-controller="show">
		<main id="login">
			<!-- 图像 -->
			<h1 class="logo">
				<a href="index.html">person</a>
			</h1>
			<!-- 用户名 -->
			<div id="user">
				<input type="text" id="userName" ng-model="user"/>
				<img src="img/person.png" alt="" id="person" /><span id="span_text">用户名/邮箱/电话</span>
			</div>
			<!-- 密码 -->
			<div id="password">
				<input type="password" id="passName" ng-model="pass"/>
				<img src="img/pass.png" alt="pass" id="pass" /><span id="span_pass">密码</span>
				<input type="button" id="eye"/>
			</div>
			<!-- 登录按钮 -->
			<a href="javascript:;" id="login_btn" ng-click="login()">登录</a>
			<!-- 注册 忘记密码 -->
			<div id="reg-for">
				<div  id="register">
					<a href="register.html">快去注册</a>
				</div>
				<div  id="forgetPass">
					<a href="javascript:;">忘记密码</a>
				</div>
			</div>
			<!-- 链接 -->
			<ul id="link">
				<li><a href="http://connect.qq.com/widget/shareqq/index.html?url=http%3A%2F%2Fzhidao.baidu.com%2Fquestion%2F479654797%3Fsharesource%3Dqq&title=%3Ca%20ID%3Dqq%3E%20QQ%20%3C%2Fa%3E%20%E9%80%9A%E8%BF%87js%20%E6%80%8E%E4%B9%88%E6%8A%8A%E4%BB%96%E8%BD%AC%E5%90%91%E8%85%BE%E8%AE%AF%E7%BD%91%EF%BC%9F_%E7%99%BE%E5%BA%A6%E7%9F%A5%E9%81%93&pics=https%3A%2F%2Fgss0.bdstatic.com%2F70cFsjip0QIZ8tyhnq%2Fimg%2Fiknow%2Fzhidaologo.png" target="_blank" class="first"></a></li>
				<li><a href="weixin.html" target="_blank" class="second"></a></li>
				<li><a href="http://v.t.sina.com.cn/share/share.php?url=http%3A%2F%2Fzhidao.baidu.com%2Fquestion%2F479654797%3Fsharesource%3Dweibo&title=%3Ca%20ID%3Dqq%3E%20QQ%20%3C%2Fa%3E%20%E9%80%9A%E8%BF%87js%20%E6%80%8E%E4%B9%88%E6%8A%8A%E4%BB%96%E8%BD%AC%E5%90%91%E8%85%BE%E8%AE%AF%E7%BD%91%EF%BC%9F_%E7%99%BE%E5%BA%A6%E7%9F%A5%E9%81%93&pic=https%3A%2F%2Fgss0.bdstatic.com%2F70cFsjip0QIZ8tyhnq%2Fimg%2Fiknow%2Fzhidaologo.png" target="_blank" class="third"></a></li>
			</ul>
		</main>
	</body>
</html>